<template>
  <div style="height: 700px">
    <el-dialog v-model="isShow" width="90%" :destroy-on-close="true">
      <UserSelector ref="userSelectorRef" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="default">{{ $t("message.userOperation.cancel") }}</el-button>
          <el-button type="primary" @click="submit" size="default">{{ $t("message.userOperation.submit") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { feature } from "@/utils/axios-utils";
import roleApi from "@/api-services/apis/system/roleApi";
import { SysUser } from "@/api-services/models/system";
import UserSelector from "@/components/Selector/userSelector.vue";
import { useI18n } from "vue-i18n";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
const { t } = useI18n();
// 定义变量内容
const userSelectorRef = ref<InstanceType<typeof UserSelector>>();
const roleId = ref<number>(0);
const isShow = ref<boolean>(false);
const openDialog = async (id: number) => {
  isShow.value = true;
  roleId.value = id;
  let res = await roleApi.getOwnUser({ id: id });
  const param = {
    chooseData: res.data.data
  };
  userSelectorRef.value?.useUserSelector(param);
};

const closeDialog = () => {
  isShow.value = false;
};
const submit = async () => {
  let selectedUser = userSelectorRef.value?.getChoosedUser();
  //将用户id组成数组
  let userIdList = selectedUser?.map((it: SysUser.UserSimpleInfo) => it.id!);
  const [err] = await feature(roleApi.grantRoleUsers({ id: roleId.value, userList: userIdList }));
  if (err) {
    NotificationError(err.message);
  } else {
    NotificationSuccess(t("message.roleAlter.grantUserSuccess"));
    closeDialog();
  }
};
// 导出对象
defineExpose({ openDialog });
</script>
